<template>
  <div class="main">
    <div class="main-title">商品库存</div>
    <div class="main-content">
      <el-row>
        <el-col :span="12">
          <el-form label-width="120px">
            <el-form-item label="SPU：">
              {{commodityInfo.commodityNo}}
            </el-form-item>
            <el-form-item label="商品名称：">
              {{commodityInfo.commodityName}}
            </el-form-item>
            <el-form-item label="商品分类：">
              <el-select class="f1" placeholder="请选择商品分类" v-model="commodityInfo.categoryId" disabled>
                <el-option v-for="(item, index) in categoryList" :key="index" :value="item.categoryId" :label="item.categoryName"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="剩余库存：">
              {{commodityInfo.stockNumSum}}
            </el-form-item>
            <el-form-item label="售卖规格：">
              <el-table :data="commodityInfo.sellAttributes" border stripe>
                <el-table-column label="规格" prop="attributeName" align="center"></el-table-column>
                <el-table-column label="零售价" prop="sellPrice" align="center"></el-table-column>
                <el-table-column label="库存" prop="stockNum" align="center"></el-table-column>
                <el-table-column label="摆放位置" prop="position" align="center"></el-table-column>
              </el-table>
            </el-form-item>
            <el-form-item label="商品主图：">
              <div class="img-wrapper">
                <img class="img" v-for="(item, index) in imgList" :key="index" :src="item" width="150" height="150">
              </div>
            </el-form-item>
            <el-form-item label="添加时间：">
              {{commodityInfo.createTime}}
            </el-form-item>
            <el-form-item>
              <el-button type="default" @click="goback">返回</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { formatDate } from '@/utils/date'
export default {
  data () {
    return {
      commodityId: this.$route.query.commodityId || '',
      commodityInfo: {},
      categoryList: [],
      imgList: []
    }
  },
  mounted () {
    this.getCategorys()
    this.getData()
  },
  methods: {
    // 获取库存详情
    getData () {
      this.$loading()
      this.$http.post(this.$api + '/stock/getStockInfoDetail', {
        commodityId: this.commodityId || ''
      }).then(res => {
        if (res.responseCode === '0000') {
          res.data.createTime = formatDate(new Date(res.data.createTime), 'yyyy-MM-dd hh:mm:ss')
          this.commodityInfo = res.data
          this.imgList = res.data.commodityCover.split(',')
        } else {
          this.$message.error({
            duration: this.$store.state.duration,
            message: res.responseMsg
          })
        }
      }).catch(err => {
        console.error(err)
      })
      this.$loading().close()
    },
    // 获取商品分类
    getCategorys () {
      this.$http.post(this.$api + '/commodity/findAllCommodityCategory', {}).then(res => {
        if (res.responseCode === '0000') {
          this.categoryList = res.data
        } else {
          this.$message.error({
            duration: this.$store.state.duration,
            message: res.responseMsg
          })
        }
      }).catch(err => {
        console.error(err)
      })
    },
    // 返回
    goback () {
      this.$router.push({
        path: '/stock/goodsStock',
        query: {
          pg: this.$route.query.pg || '',
          size: this.$route.query.size || ''
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.img-wrapper {
  .img {
    display: inline-block;
    margin-right: 20px;
    border: solid 1px #e5e5e5;
  }
}
</style>
